<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('首页轮播列表')" />
</head>
<body class="gray-bg">
    <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="notice-form">
					<div class="select-list">
						<ul>
							<li>
								轮播名称：<input type="text" name="name"/>
							</li>
							<li>
								状态：<select name="status">
									<option value="">所有</option>
								    <option value="true">启用</option>
									<option value="false">关闭</option>
								</select>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
	        <div class="btn-group-sm" id="toolbar" role="group">
		        <a class="btn btn-success" onclick="$.operate.addFull()" >
		            <i class="fa fa-plus"></i> 新增
		        </a>
				<a class="btn btn-danger btn-del disabled" id="btnDelete" onclick="$.operate.removeAll()">
					<i class="fa fa-remove"></i> 删除
				</a>
	        </div>
	        
	        <div class="col-sm-12 select-table table-striped">
	            <table id="bootstrap-table" data-mobile-responsive="true"></table>
	        </div>
    	</div>
    </div>
    <th:block th:include="include :: footer" />
	<script>
        $(function(){
            //1.初始化Table
            var oTable = new TableInit();
            oTable.Init();
            //2.初始化Button的点击事件
            var oButtonInit = new ButtonInit();
            oButtonInit.Init();
            var options = {
                modalName: "轮播图",
                createUrl: "/carousel/add",
                updateUrl: "/carousel/edit/{id}",
                removeUrl: "/carousel/remove",
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        field: 'id',
                        title: '编号',
                        sortable: true
                    }
                    ]
            }
            $.table.init(options);
        });
        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#bootstrap-table').bootstrapTable({
                    url: '/carousel/list',         //请求后台的URL（*）
                    method: 'get',                      //请求方式（*）
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    striped: false,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortName: "id",
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    //    queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber:1,                       //初始化加载第一页，默认第一页
                    pageSize: 10,                       //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,
                    showColumns: false,                  //是否显示所有的列
                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    // clickToSelect: true,                //是否启用点击选中行
                    // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                    showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                    cardView: true,                    //是否显示详细视图
                    detailView: false,
					//是否显示父子表
                    columns: [
						{
						    checkbox: true
						},
                        {
                        field: 'id',
                        title: '编号',
                        sortable: true
                    },{
                        field : 'name',
                        title : '轮播名称'
                    },
                        {
                            field : 'picture',
                            title : '轮播图片'
                        },
                        {
                            field : 'url',
                            title : '轮播连接'
                        },
                        {
                            field: 'weight',
                            title: '排序'
                        },
                        {
                            field: 'enable',
                            title: '状态',
                            formatter: function (value, row, index) {
                                return statusTools(row);
                            }
                        },
                        {
                            field: 'createTime',
                            title: '创建时间',
                            formatter: function(e ,value, row, index){
                                var  actions = [];
                                actions.push('  <div type="text">'+formattime(value.createTime)+'</div>')
                                return actions.join('');
                            }
                        }, {
                        field: 'Button',
                        title: '操作',
                            formatter: function (value, row, index) {
                                return Operate(row);
                            }
                    }
                        ,],
                    showExport:false,              //是否显示导出按钮(此方法是自己写的目的是判断终端是电脑还是手机,电脑则返回true,手机返回falsee,手机不显示按钮)
                    //点击全选框时触发的操作

                    onCheckAll:function(rows){
                        $('#btnDelete').removeClass('disabled');
                    },
                    //点击每一个单选框时触发的操作
                    onCheck:function(row){
                        $('#btnDelete').removeClass('disabled');
                    },
                    //取消每一个单选框时对应的操作；
                    onUncheck:function(row){
                        $('#btnDelete').addClass('disabled');
                    },
                    onUncheckAll: function (row) {
                        $('#btnDelete').addClass('disabled');
                     }
                });
            };
            return oTableInit;
        };

        $('#userEditModal').on('hidden.bs.modal', function (){
            document.getElementById("userEdit").reset();
        });
        $('#userNewModal').on('hidden.bs.modal', function (){
            document.getElementById("userNew").reset();
            $('#newError').css('display','none');
        });
        function formattime(timestamp) {
            var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            Y = date.getFullYear() + '-';
            M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            D = date.getDate() + ' ';
            h = date.getHours() + ':';
            m = date.getMinutes() + ':';
            s = date.getSeconds();
            return Y+M+D+h+m+s;
        }
        /* 用户状态显示 */
        function statusTools(row) {
            if (row.enable == false) {
                return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> ';
            } else {
                return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> ';
            }
        }
        /* 轮播-停用 */
        function disable(id) {
            $.modal.confirm("确认要停用这个轮播图吗？", function() {
                $.operate.post("/carousel/changeStatus", { "id": id, "enable": 0 });
            })
        }

        /* 轮播-启用 */
        function enable(id) {
            $.modal.confirm("确认要启用这个轮播图吗？", function() {
                $.operate.post("/carousel/changeStatus", { "id": id, "enable": 1 });
            })
        }
        function refreshTable() {
            $("#tb_departments").bootstrapTable('refresh',{url : "/carousel/list"});
        }
        function Operate(row){
            return [
                '<button  onclick="$.operate.editFull('+row.id+')" type="button" class="btn btn-success btn-xs"><i class="fa fa-edit"></i>&nbsp编辑</button>',
                '&nbsp<button onclick="$.operate.remove('+row.id+')" type="button" class="btn btn-danger btn-xs"><i class="fa fa-remove"></i>&nbsp删除</button>'
            ].join("")
        }
        var ButtonInit = function () {
            var oInit = new Object();
            var postdata = {};
            oInit.Init = function () {
                //初始化页面上面的按钮事件
            };
            return oInit;
        };
	</script>
</body>
</html>